<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Tree Demos</title>
	<link  href="../jquery.tree.css" rel="stylesheet" type="text/css"  class="view-source"/>
	<link  href="../../../../themes/default/style.css" rel="stylesheet" class="view-source">
	<script src="../../../../scripts/jquery.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/common.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/browserfix.js" type="text/javascript"  class="view-source"></script>
	<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript"></script>
	
	<script src="../jquery.tree.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">

	<style>
		.tree{
			width:200px;
		}
		
		button{
			width:150px;
			font-size: 80%;
		}
		
		.ns{
			font-size:80%;
		}
	</style>

<script class="view-source noparse">
	$(function(){
		var data = [{
			id:'11',
			isExpand:true,
			text:'根节点',
			childNodes:[
				{
					id:'21',
					text:'数据源表11',
					showCheck:true, //默认为true
					childNodes:[
						{
							id:'ss',
							text:'搜索',
							disabled:true,
							childNodes:[
								{
									id:'baidu',
									disabled:true,
									text:'百度'
								},
								{
									id:'google',
									text:'谷歌'
								}
							]
						}
					]
				},
				{
					id:'31',
					text:'数据源表二1',
					complete:false //表示需要异步加载
				}
			]
		 },{
				id:'121',
				text:'根节点12'
			 }];

		var rootPath = window.location.href.substring(0,window.location.href.lastIndexOf("\/") + 1);
		
	$('#event-tree').tree({//tree为容器ID
          	method		:	'post',
          	asyn		:	true, //异步
          	url			:	rootPath + 'data.html',
          	dataProxy	:	{type:'data',value:data},//获取数据方式
          	onNodeClick	:	function(id, text, record,node){
          		$('.value').html('onNodeClick事件：<br/>'+ id +'&nbsp;&nbsp;&nbsp;&nbsp;'+text) ;
          	},
          	showCheck	:	true, //是否显示checkbox框 , 默认所有节点出现选择框
          	onCheck		:	function(id, text,checked, record,node){
          		$('.value').html('onCheck事件：<br/>'+ checked+"&nbsp;&nbsp;&nbsp;&nbsp;"+text ) ;
          	},
          	cascadeCheck:true, //级联选择，UP向上级联 DOWN向下级联 false不级联 true向上向下级联

          	onChecking  :function(id, text,checked, record){
          		$('.value').append( '<br/>(onChecking)选择节点开始：'+text+"---当前状态:"+checked ) ;
              },
              onChecked  :function(id, text,checked, record){
          		$('.value').append('<br/>(onChecked)选择节点结束') ;
              },
          	onUpdating  :function(id , item){
          		$('.value').html('更新事件：<br/>(onUpdating)开始更新节点:'+ id+"&nbsp;&nbsp;&nbsp;&nbsp;"+item.text ) ;
              },
		onUpdated  :function(id , item){
              	$('.value').append('<br/>(onUpdated)更新节点完成') ;
              },
              onAdding  :function(id , item){
          		$('.value').html('新增节点事件：<br/>(onAdding)开始新增节点:'+ id+"&nbsp;&nbsp;&nbsp;&nbsp;"+item.text ) ;
              },
		onAdded  :function(id , item){
              	$('.value').append('<br/>(onAdded)新增节点完成') ;
              },
              onDeleting  :function(id , item){
          		$('.value').html('删除节点事件：<br/>(onDeleting)开始删除节点:'+ id +"   "+item.text  ) ;
              },
		onDeleted  :function(id , item){
              	$('.value').append('<br/>(onDeleted)删除节点完成') ;
              },onLoaded :function(){
              	$('.value').append('onLoaded:数据加载完成') ;
              },
              onExpand :function( id , item, isRender , isLoaded ){// isRender是否已经渲染完成，isLoaded是否加载完成
			var rs = isRender?"该节点子节点已经渲染完成":"该节点子节点还未渲染" ;
			var ls = isLoaded?"该节点子节点已经加载完成":"该节点子节点还未加载" ;
              	$('.value').html(["节点"+id+"开始展开：",rs,ls].join('<br/> ')) ;
              }
          }) ;


          $('.deleteNode').click(function(){
          	var vals = $('#event-tree').tree().getCurrentNode()  ;
          	if(vals == undefined || vals == null || vals.id == undefined){
          		alert('请先点击要删除的节点，再点击删除节点按钮。');
          	}else{
          		$('#event-tree').tree().deleteNode(vals.id) ;	
          	}
          }) ;

          $('.updateNode').click(function(){
          	$('#event-tree').tree().updateNode( {id:'31',text:'已经修改'}) ;	
          }) ;

          $('.addNode').click(function(){
          	var vals = $('#event-tree').tree().getCurrentNode()  ;
          	if(vals == undefined || vals == null || vals.id == undefined){
          		alert('请先点击要添加的节点，再点击添加节点按钮。');
          	}else{
          		$('#event-tree').tree().addNode( {id:'21001',text:'动态添加',parentId:vals.id}) ;	
          	}
          }) ;
           
	}) ;
</script>
	
</head>

<body>
   <div style="float:left;width:200px;">
	<hr/>
	<button class='deleteNode'>删除节点</button><br/>
	<button class='updateNode'>修改节点</button><br/>
	<button class='addNode'>添加节点</button><br/>
	<br>
   </div>
	
	<div id='content-event' class='demo' style="float:left">
		
		<div id="event-tree" class="tree"></div>
		<br />
		<div class="ui-state-highlight value" style="width:300px;"></div>
		
	</div>
	
	<div style="clear:both"></div>
</body>
</html>